<template>
  <div class="comment">
    <!-- 1.0 头部导航 -->
     <van-nav-bar
      title="精彩跟帖"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="$router.push({ path: '/' })"
    />
    <!-- 2.0 评论列表 -->
     <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <van-list
        class="list"
        v-model="loading"
        :finished="finished"
        @load="onLoad"
      >
      
      <div class="item" 
        v-for='item in commentList'
        :key='item.id'
      >
        <div class="item-header">
          <van-image 
            round
            class="avatar" 
            :src="item.user.head_img | imgUrl"
          />
          <div class="info">
            <p class="username">{{item.user.nickname}}</p>
            <p class="date">{{item.create_date | formatDate}}</p>
          </div>
          <span class="reply" @click="reply(item)">回复</span>
        </div>
        <!-- 2.2 父评论内容， -->
          <McContent 
            v-if="item.parent"
            :parent="item.parent"
            @parenRrply='reply'
          ></McContent>
        <div class="item-footer">
          <p class="contnt">{{item.content}}</p>
        </div>
      </div>
    </van-list>
    <van-empty v-if="!commentList.length" description="空空如也" />
 </van-pull-refresh>
    <!-- 3.0 底部回复评论 -->
    <Mycommpil
      :article="article"
      @update="updateFn"
      ref="Mycommpil"
      :commentObj="temp"
      @reset="temp=null"
    ></Mycommpil>
  </div>
</template>

<script>
// 文章数据 、 文章评论列表
import {getPostCommentByIdAPI,getPosDetatAPI} from '../apis/news'

import McContent from '../components/McContent.vue'
import Mycommpil from '../components/Mycommpil.vue'
export default {
  components:{
    McContent,
    Mycommpil,
  },
  data () {
    return {
      id: this.$route.params.id,
      commentList:[],
      article:{},
      temp:null,
      pageIndex:1,
      pageSize:10,
      loading:false,
      finished:false,
      refreshing:false
      
    }
  },
  async created () {
    // const id = this.$route.params.id;
    // const res = await getPosDetatAPI(id)
    // console.log(res);
    this.getCommentList();
    const res2 = await getPosDetatAPI(this.id);
    // console.log(res2);
    this.article = res2.data.data;

  },
  methods:{
      // 下拉刷新时触发的函数
     async onRefresh() {
       this.pageIndex = 1;
       this.commentList = [];
       this.finished = false;
       this.loading = true;
       await this.getCommentList();
       this.refreshing = false
      },
      onLoad() {
          this.pageIndex++;
          this.getCommentList();
      },
    // 点击里回复按钮
      reply(item) {
        console.log(1111,'点击里');
        this.$refs.Mycommpil.inputFn()
        // 当前评论
        this.temp = item;

      },
    async getCommentList() {
      // const id = this.$route.params.id;
      const res = await getPostCommentByIdAPI(this.id,{
        pageIndex:this.pageIndex,
        pageSize:this.pageSize,
      });
      // this.commentList = res.data.data
      // 没有更多数据的时候就要结束
      if(res.data.data.length === 0) {
        this.finished = true;
        return
      }
      // 分页是追加到原数组里面
      this.commentList.push(...res.data.data);
      // 隐藏提示追加功能
      this.loading= false
    },
    updateFn() {
      // this.getCommentList();
      this.onRefresh()
      window.scrollTo({top:0,behavior:"smooth"});
      this.temp = null;
    }
  }
}
</script>

<style lang="less" scoped>
.list{
  .item{
    border-bottom: 1px solid #ddd;
    padding: 10px;
    .item-header {
      display: flex;
      .avatar{
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }
      .info {
        flex: 1;
        .username {
          font-size: 16px;
        }

        .date {
          font-size: 13px;
          color: #666;
        }
    }
  }
    .reply {
      font-size: 14px;
      color: #666;
      position: relative;
      z-index: 11;
    }
     .item-footer {
      .content {
            margin: 10px 0;
      }
    }
  }
}
</style>